<template>
	<view class="page">
		<!-- 院区信息 -->
		<view class="campusInfo">
			<view class="changeCampus">
				<view class="Info">
					<image style="width: 90rpx;"
						src="https://cdn8.axureshop.com/demo/2208121/images/%E9%99%A2%E5%8C%BA%E5%88%97%E8%A1%A8/u602.png"
						mode="widthFix"></image>
					<view class="campus">
						<view class="name">
							{{hospital.campus}}
						</view>
						<view class="address">
							四川省成都市锦江区画溪路666号
						</view>
					</view>
				</view>
				<view class="change" @click="switchs">
					切换院区 >
				</view>
			</view>
			<!-- 智能客服 -->
			<view class="customer">
				<view class="question">
					不知道挂什么科，问问智能客服？
				</view>
				<view class="ask">
					去咨询
				</view>
			</view>
		</view>
		<!-- 科室列表 -->
		<view class="departlist">
			<!-- 搜索 -->
			<uni-search-bar class="searchIpt" radius="8" placeholder="可输入科室名称检索" clearButton="auto" cancelButton="none" bgColor="#f2f2f2" @confirm="search" />
			<!-- 科室列表 -->
			<view class="content">
				<uv-vtabs class="vtabs" height="900rpx" barWidth="240rpx" :chain="chain" :list="list" :barItemBadgeStyle="{right:'20px',top:'12px'}" @change="change">
					<uv-vtabs-item>
						<view class="item" v-for="(item2,index2) in list2" :key="index2" v-if="list2">
							<view class="item-title" @click="getDepart(index2)">
								<text class="text">{{item2.name}}</text>
							</view>
						</view>
						<kevy-empty :show="true" type="favor" text="没有列表哦~" v-if="list2.length==0"></kevy-empty>
					</uv-vtabs-item>
				</uv-vtabs>
			</view>
		</view>
	</view>
</template>

<script setup>
import { reactive, ref , computed} from 'vue';
import { onLoad } from '@dcloudio/uni-app'

	// 科室搜索框
	const searchValue=ref('')
	const search = (res) => {
		uni.showToast({
			title: '搜索：' + res.value,
			icon: 'none'
		})
	}
	// 科室列表
	const getList = reactive([{
		name: '外科',
		childrens: [
			{
				name: '中医外科门诊',
				id:1
			},
			{
				name: '门诊外一科',
				id:2
			},
			{
				name: '门诊外二科',
				id:3
			},
			{
				name: '门诊外三科',
				id:4
			},
			{
				name: '门诊外四科',
				id:5
			},
			{
				name: '神经外科',
				id:6
			}
		]
	}, {
		name: '内科',
		childrens: [{
				name: '消化内科',
				id:7
			},
			{
				name: '内分泌科',
				id:8
			},
			{
				name: '肾脏内科',
				id:9
			},
			{
				name: '心血管内科',
				id:10
			},
		]
	}, {
		name: '全科门诊',
		childrens: [{
				name: '全一科门诊',
				id:11
			},
			{
				name: '全二科门诊',
				id:12
			},
			{
				name: '全三科门诊',
				id:13
			},
			{
				name: '全四科门诊',
				id:14
			},
		]
	}, {
		name: '口腔科',
		childrens: [
			{
				name: '口腔科',
				id:15
			},
		]
	}, {
		name: '耳鼻喉科',
		childrens: [
			{
				name: '耳鼻喉科',
				id:16
			},
		]
	}, ])
	const list=reactive([])
	const chain=ref(false)	
	const value=ref(0)		//所选科室分类
	const hospital = reactive({
		campus:'四川省保健院南苑',		//院区
		depart:'外科',		//部门（科室分类）
		department:''	,//科室
		id:0
	})
	onLoad((option)=>{
		hospital.campus = uni.getStorageSync('campus')
		// 模拟接口请求数据
		uni.showLoading({
			title: '加载中'
		})
		setTimeout(() => {
			list.push(...getList);
			uni.hideLoading();
		}, 200)
	})
	const list2=computed(()=>{
		const _list = list[value.value]?.childrens;
		return _list ? _list : [];
	})
	
	const change=(index)=> {
		// console.log('选项改变：', list[index].name)
		value.value=index
		hospital.depart = list[index].name;
		if(list[index].childrens.length==0){
			hospital.department = list[index].name
			uni.navigateTo({
				url:'/pages/Doctor_List/Doctor_List?hospital='+JSON.stringify(hospital)
			})
		}
	}
	
	const getDepart=(index) => {
		// console.log(list2.value[index].name)
		hospital.department = list2.value[index].name
		hospital.id = list2.value[index].id
		// uni.navigateTo({
		// 	url:'/pages/Doctor_List/Doctor_List?'+new URLSearchParams(hospital).toString()
		// })
		uni.navigateTo({
			url:'/pages/Doctor_List/Doctor_List?hospital='+JSON.stringify(hospital)
		})
	}
	
	// 切换院区
	const switchs = () => {
		uni.redirectTo({
			url:'/pages/CampusList/CampusList'
		})
	}
</script>

<style lang="scss" scoped>
	.page {
		.campusInfo {
			width: 100%;
			height: 236rpx;
			background-color: rgba(230, 244, 255, 1);
			padding: 0 40rpx;
			padding-top: 12rpx;
			box-sizing: border-box;

			.changeCampus {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.Info {
					display: flex;
					align-items: center;

					.campus {
						margin-left: 28rpx;
						font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI', sans-serif;

						.name {
							font-size: 32rpx;
							font-weight: 700;
							color: #333;
						}

						.address {
							font-size: 24rpx;
							color: #7f7f7f;
							margin-top: 12rpx;
						}
					}
				}

				.change {
					font-family: 'Microsoft YaHei UI', sans-serif;
					font-size: 28rpx;
					color: #555;
				}
			}

			.customer {
				width: 100%;
				height: 80rpx;
				border-radius: 16rpx;
				margin-top: 26rpx;
				background-color: #fff;
				font-family: 'Microsoft YaHei UI', sans-serif;
				color: #555555;
				padding: 0 40rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.question {
					font-size: 26rpx;
					color: #555;
				}

				.ask {
					font-size: 26rpx;
					color: #1677FF;
					cursor: pointer;
				}
			}
		}
		.departlist{
			.header {
				padding: 30rpx;
				font-size: 30rpx;
				color: #333;
			}
			
			.item {
				padding: 10rpx 20rpx;
			
				&-title {
					height: 100rpx;
					line-height: 100rpx;
					border-bottom: 2rpx solid rgba(242, 242, 242, 1);
					box-sizing: border-box;
					.text {
						font-family: 'Microsoft YaHei UI', sans-serif;
						font-size: 26rpx;
						color: #333;
					}
				}
			
			}
		}
	}
</style>